<template>
  <el-col class="sysButton" :style="{marginBottom:buttonData.bottomMargin ? buttonData.bottomMargin : '10px'}">
    <div v-for="(item, index) in buttonData.data" class="innner">
      <el-upload
        :key="index"
        v-if="item.isUpload"
        class="upload-demo inline-block"
        :action="item.action"
        :on-preview="handlePreview"
        :on-remove="handleRemove"
        :before-remove="beforeRemove"
        :http-request="handleImport"
        multiple
        :limit="3"
        :on-exceed="handleExceed"
        :file-list="fileList">
        <el-button
          :type="item.type ? item.type : 'primary'"
          :disabled="item.disabled"
          :size="item.size"
          :plain="item.isPlain"
          @click="buttonClick(item.click)">
          {{ item.name }}
        </el-button>
      </el-upload>
      <el-button
        v-else
        :key="index"
        :type="item.type ? item.type : 'primary'"
        :disabled="item.disabled"
        :style="{color:item.color}"
        :size="item.size"
        :plain="item.isPlain"
        @click="buttonClick(item.click)"
      >
        {{ item.name }}
      </el-button>
      <div class="divider" v-if="index!==buttonData.data.length-1"></div>
    </div>
  </el-col>
</template>
<script>
export default {
  name: 'Index',
  props: {
    buttonData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    buttonClick(name) {
      this.$emit(name);
    },
    handleImport(params) {
      this.$emit('handleImport', params)
    },
    handleRemove(file, fileList) {
      this.$emit('handleRemove', file, fileList)
    },
    handlePreview(file) {
      this.$emit('handlePreview', file)
    },
    handleExceed(files, fileList) {
      this.$emit('handleExceed', files, fileList)
    },
    beforeRemove(file, fileList) {
      this.$emit('beforeRemove', file, fileList)
    }
  }
}
</script>

<style scoped>
.sysButton{
  margin-bottom: 10px;
  /*border-right: 1px solid #e9e9e9;*/
}
.divider{
  border-right: 1px solid #e9e9e9;
  /*color: #e9e9e9;*/
  margin: 0 8px;
  width: 1px;
  height: 18px;
}
.inline-block{
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
</style>
